<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如风壁纸 - 首页</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="app-header">
        <h1 class="logo">如风壁纸</h1>
        <div class="search-bar">
            <input type="text" id="search-input" placeholder="搜索壁纸...">
            <button id="search-btn"><i class="ri-search-line"></i></button>
        </div>
    </header>
    
    <nav class="bottom-nav">
        <a href="index.html" class="nav-item active">
            <img src="icon/home.svg" alt="图标" width="48" height="48">
            <span>首页</span>
        </a>
        <a href="categories.html" class="nav-item">
            <img src="icon/find.svg" alt="图标" width="48" height="48">
            <span>发现</span>
        </a>
        <a href="favorites.html" class="nav-item">
            <img src="icon/favorite.svg" alt="图标" width="48" height="48">
            <span>收藏</span>
        </a>
        <a href="upload.html" class="nav-item">
            <img src="icon/upload.svg" alt="图标" width="48" height="48">
            <span>上传</span>
        </a>
    </nav>
    
    <main class="container">
        <div class="wallpaper-filters">
            <button class="filter-btn active" data-sort="popular">热门</button>
            <button class="filter-btn" data-sort="newest">最新</button>
            <button class="filter-btn" data-sort="trending">趋势</button>
        </div>
        
        <div id="wallpaper-grid" class="wallpaper-grid">
            <!-- 壁纸内容将通过JS动态加载 -->
            <div class="loading-spinner">
                <div class="spinner"></div>
                <p>加载中...</p>
            </div>
        </div>
        
        <div id="load-more" class="load-more">
            <span>上拉加载更多</span>
        </div>
    </main>
    
    <script src="js/api.js"></script>
    <script src="js/storage.js"></script>
    <script src="js/main.js"></script>
</body>
</html> 